<template>
  <view class="page">
    <Navbar :title="pageTitle" />
    <u-sticky customNavHeight="0" z-index="6">
      <u-image
        show-loading
        :src="detail.cover_img"
        width="100%"
        height="248px"
        @click="preImage"
      />
    </u-sticky>
    <view class="body">
      <view class="tag">丘山阅</view>
      <view class="mark">丘山阅镇</view>
      <Sub-title :label="detail.shopname" bottom-color="#E9F4F4" />
      <view class="base">
        <u-text
          :text="detail.open_hours || '-'"
          prefix-icon="clock-fill"
          icon-style="font-size: 28rpx; color: #3BA199; margin-right: 20rpx"
          lines="1"
          line-height="60rpx"
          color="#555555"
          size="28rpx"
        />
        <u-text
          :text="detail.address || '-'"
          prefix-icon="map-fill"
          icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx"
          lines="1"
          line-height="60rpx"
          color="#555555"
          size="28rpx"
          @click="handleMap"
        />
        <u-text
          :text="detail.phone || '-'"
          prefix-icon="phone-fill"
          icon-style="font-size: 28rpx; color: #2CB9A4; margin-right: 20rpx"
          lines="1"
          line-height="60rpx"
          color="#555555"
          size="28rpx"
          @click="callPhone"
        />
        <view class="sale"> 已售：{{ detail.sold_num }} </view>
      </view>
      <Sub-title label="套餐图文" bottom-color="#E9F4F4" />
      <u-parse :content="detail.content" />
      <view class="btn">
        <view class="center-btn" :class="{ disabled: timeout }" @click="handlePay">
          买单
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/Navbar/index";

import { homePartyDetail } from "@/request/homeApi.js";
export default {
  components: { Navbar },
  data() {
    return {
      pageTitle: "", // 页面标题
      detail: {}, // 详情内容
    };
  },
  onLoad(e) {
    this.pageTitle = decodeURIComponent(e.title);
    this.getData(e.id);
  },
  computed: {
    // 是否已过期
    timeout() {
      let end = Number(new Date(this.detail.end_time + " 23:59:59"));
      let now = Number(new Date());
      return now > end;
    },
  },
  // 监听页面滚动
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  methods: {
    // 预览图片
    preImage() {
      uni.previewImage({
        urls: [this.detail.cover_img],
      });
    },
    // 点击拨号
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.detail.phone,
      });
    },
    // 跳转地图
    handleMap() {
      uni.authorize({
        scope: "scope.userLocation", // 请求获取用户地理位置信息的权限
        success: () => {
          const { lat, lng, address } = this.detail;
          uni.openLocation({
            latitude: parseFloat(lat || 0),
            longitude: parseFloat(lng || 0),
            name: address,
            scale: 16,
          });
        },
        fail() {
          uni.showToast({
            title: "授权失败",
            icon: "none",
          });
        },
      });
    },
    // 获取详情
    getData(id) {
      homePartyDetail({ id }).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
        }
      });
    },
    // 买单
    handlePay() {
      if (this.timeout) {
        uni.showToast({
          title: "该活动已结束",
          icon: "none",
        });
        return;
      }
      this.$author(() => {
        uni.navigateTo({
          url: `/pages/home/dietOrder?id=${this.detail.id}`,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .body {
    width: 100%;
    padding: 20rpx 20rpx 180rpx 20rpx;
    z-index: 8;
    min-height: 100rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: -80rpx;
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    .mark {
      position: absolute;
      top: -80rpx;
      right: 30rpx;
      width: 172rpx;
      height: 56rpx;
      color: #fff;
      font-size: 28rpx;
      line-height: 56rpx;
      text-align: center;
      border-radius: 40rpx;
      background-color: #0000006b;
    }
    .tag {
      position: absolute;
      right: 0;
      top: 40rpx;
      color: #fff;
      font-weight: 600;
      font-size: 32rpx;
      background-color: #3ba199cc;
      padding: 4rpx 24rpx;
      border-radius: 24rpx 0 0 24rpx;
    }
    .base {
      position: relative;
      .sale {
        position: absolute;
        bottom: 0;
        right: 0;
        line-height: 60rpx;
        color: $active-color;
        font-size: 24rpx;
        font-weight: 600;
      }
    }
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    height: 126rpx;
    padding: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .center-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      text-align: center;
      color: $active-color;
      background-color: #cee7e5;
      border-radius: 40rpx;
    }
    .disabled {
      color: #f9f9f9;
      background-color: #dbdbdb;
    }
  }
}
</style>
